Ext.Loader.setConfig( {
	enabled : true
});

Ext.require( [ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
		'Ext.form.*' ]);

Ext.onReady(function() {
	// Define our data model
		Ext.define('Category', {
			extend : 'Ext.data.Model',
			fields : [ 'categoryCode', 'categoryName', {
				name : 'jancdCount',
				type : 'float'
			}, {
				name : 'itemCount',
				type : 'float'
			} ],
			idProperty : 'categoryCode'
		});

		// create the Data Store
		var store = Ext.create('Ext.data.Store', {
			autoLoad : true,
			pageSize : 50,
			model : 'Category',
			remoteSort : true,
			proxy : {
				type : 'ajax',
				url : 'getAllCategory/',
				reader : {
					root : 'results',
					totalProperty : 'totalCount'
				}
			}
		});

		var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
			clicksToMoveEditor : 1,
			autoCancel : false
		});

		// create the grid and specify what field you want
		// to use for the editor at each column.
		var grid = Ext.create('Ext.grid.Panel', {
			store : store,
			columnLines: true,
			columns : [ {
				header : 'カテゴリ',
				dataIndex : 'categoryName',
				flex : 1,
				editor : {
					allowBlank : false
				}
			}, {
				header : 'JANCD数',
				dataIndex : 'jancdCount',
				width : 160,
				renderer: Ext.util.Format.numberRenderer('0,000'),
				editor : {
					allowBlank : false
				}
			}, {
				header : '商品数',
				dataIndex : 'itemCount',
				width : 90,
				renderer: Ext.util.Format.numberRenderer('0,000'),
				editor : {
					allowBlank : false
				}
			} ],
			renderTo : 'bodyarea',
			height : 400,
			title: '商品管理＞カテゴリ管理',
			frame : true,
			tbar : [ {
				text : '<div style="font-size:13px;">新規作成</div>',
				iconCls : 'add',
				handler : function() {
					rowEditing.cancelEdit();

					// Create a model Category
				var r = Ext.create('Category', {
					categoryName : 'a',
					jancdCount : 0,
					itemCount : 0
				});

				store.insert(0, r);
				rowEditing.startEdit(0, 0);
			}
			}, {
				itemId : 'removeEmployee',
				text : '削除',
				iconCls : 'remove',
				handler : function() {
					var sm = grid.getSelectionModel();
					rowEditing.cancelEdit();
					store.remove(sm.getSelection());
					if (store.getCount() > 0) {
						sm.select(0);
					}
				},
				disabled : true
			} ],
			plugins : [ rowEditing ],
			listeners : {
				'selectionchange' : function(view, records) {
					grid.down('#removeEmployee').setDisabled(!records.length);
				}
			}
		});

	});
